<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <style>
        form span {color: red}
    </style>
</head>
<body>
<div id="app">
    <form method="post" action="reg" style="display: grid;
        grid-template-columns: 300px auto; grid-gap: 10px">
        <input type="text" name="name" v-model="user.name" placeholder="请输入用户名"><span>{{error.name}}</span>
        <input type="password" name="pwd" v-model="user.pwd" placeholder="请输入密码"><span>{{error.pwd}}</span>
        <input type="text" name="phone" v-model="user.phone" placeholder="请输入手机号"><span>{{error.phone}}</span>
        <input type="text" name="email" v-model="user.email" placeholder="请输入邮箱"><span>{{error.email}}</span>
        <select name="gender" v-model="user.gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select><span>{{error.gender}}</span>
        <input type="date" name="birthday" v-model="user.birthday" placeholder="请输入生日">
        <span>{{error.birthday}}</span>
        <div>
            <input type="checkbox" name="hobby" v-model="user.hobby" value="篮球">篮球
            <input type="checkbox" name="hobby" v-model="user.hobby" value="足球">足球
            <input type="checkbox" name="hobby" v-model="user.hobby" value="跑步">跑步
            <input type="checkbox" name="hobby" v-model="user.hobby" value="游泳">游泳
            <input type="checkbox" name="hobby" v-model="user.hobby" value="篮球">篮球
        </div><span>{{error.hobby}}</span>
        <input type="file" id="headFile" @change="upload" accept="image/*" style="display: none">
        <img :src="user.head" alt="点击请上传用户头像" onclick="headFile.click()"
             style="width: 100px;height: 100px;border-radius: 50%;object-fit: cover"><br>
        <div style="text-align: right">
            <input type="submit" value="注册 表单提交方式">
            <input type="submit" value="注册 Ajax 表单格式" @click.prevent="reg">
            <input type="submit" value="注册 Ajax JSON格式" @click.prevent="reg1">
        </div>
    </form>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                user:{name: '',
                    pwd: '',
                    phone: '',
                    email: '',
                    gender: '',
                    birthday: '',
                    hobby: [],
                    head:""},
                error:{name: '',
                    pwd: '',
                    phone: '',
                    email: '',
                    gender: '',
                    birthday: '',
                    hobby: ""}
            }
        },
        methods: {
            reg() {
                var p = new URLSearchParams();
                for (let name in this.user) {
                    // 数组特殊处理
                    if(name === 'hobby'){
                        this.user.hobby.forEach(hobby => {
                            p.append('hobby', hobby)
                        })
                    } else {
                        p.append(name, this.user[name]);
                    }
                }
                axios.post('reg', p).then(res => {
                    // 清空错误信息
                    this.error = {name: '',
                        pwd: '',
                        phone: '',
                        email: '',
                        gender: '',
                        birthday: '',
                        hobby: ""}
                    if (res.data.code == 1) {
                        alert('注册成功')
                    } else {
                        console.log(res.data.data);
                        for (let field in this.error) {
                            // 从错误数组中过滤出当前字段的错误对象
                            // 将错误对象转换为字符串信息
                            // 将多个字符串信息合并为一个字符串
                            var errMsg = res.data.data.filter(err=> err.field==field)
                                .map(err=>err.defaultMessage)
                                .join("; ");
                            this.error[field] = errMsg;
                        }
                    }
                })
            },
            reg1(){
                axios.post('reg', this.user).then(res => {
                    // 清空错误信息
                    this.error = {name: '',
                        pwd: '',
                        phone: '',
                        email: '',
                        gender: '',
                        birthday: '',
                        hobby: ""}
                    if (res.data.code == 1) {
                        alert('注册成功')
                    } else {
                        console.log(res.data.data);
                        for (let field in this.error) {
                            // 从错误数组中过滤出当前字段的错误对象
                            // 将错误对象转换为字符串信息
                            // 将多个字符串信息合并为一个字符串
                            var errMsg = res.data.data.filter(err=> err.field==field)
                                .map(err=>err.defaultMessage)
                                .join("; ");
                            this.error[field] = errMsg;
                        }
                    }
                })
            },
            upload(){
                if (headFile.files.length == 0){
                    alert("请选择要上传的图片");
                    return;
                }
                let data = new FormData();
                // files 是用户选择的文件对象数组
                data.append("head", headFile.files[0]);
                axios.post("/uploadHead", data).then(res => {
                    if(res.data.code == 1){
                        this.user.head = res.data.data;
                    }
                });
            }
        }
    })
</script>
</body>
</html>